<!DOCTYPE html>
<html lang="zn-CH">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/favicon.ico"
        type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情页</title>
    <!-- 引入icon字体 -->
    <link rel="stylesheet" type="text/css" href="../../public/css/icon-font.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../../public/elementUI/elementUI.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../../public/css/bascis.css">
    <link rel="stylesheet" type="text/css" href="../../public/css/animate.min.css">

    <script src="../../public/js/vue-lazyload.js"></script>
    <!-- 引入组件库 -->
    <script src="../../public/elementUI/elementUI.js"></script>
    <script src="../../public/js/axios.min.js"></script>

    <!-- 局部引入 -->
    <link rel="stylesheet" type="text/css" href="./product.css">


</head>

<body>
    <div id="app">
        <!-- header -->
        <header>
            <div class="center hd-context">
                <div v-show="isLogin">
                    <el-dropdown>
                        <div class="hd-avatar">
                            <el-avatar shape="square" :size="30" fit="fill" :src="userInfo.cusAvatar"></el-avatar>
                            <a>{{userInfo.cusNickname}}</a>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <p @click="gotoCar()">购物车</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="gotoPersional()">个人中心</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="logout()">退出</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div v-show="!isLogin"><a href="../login/login.html">登录</a></div>
                <div v-show="!isLogin"><a href="../login/login.html">注册</a></div>
                <div><a href="../invitation/invitation.html" target="_blank">店铺入驻</a></div>
            </div>
        </header>




        <div class="center main-body">

            <div class="top">
                <div class="img-box">
                    <div class="img">
                        <img width="372px" height="372px" v-lazy="proImgList[thumbIndex]">
                    </div>
                    <div class="thumb-container">
                        <ul>
                            <li v-for="(item ,index)  in proImgList" :class="{'current':thumbIndex==index}">
                                <img width="83px" height="83px" v-lazy="proImgList[index]" @click="thumbIndex=index">
                            </li>
                        </ul>
                    </div>


                </div>
                <div class="pro-info">
                    <h1>{{proInfo.proTitle}}</h1>
                    <h2>{{proInfo.proSubtitle}}</h2>
                    <div class="price-store">
                        <div class="left">
                            <p>售价</p>
                            <p>店铺</p>
                            <p>店铺评分</p>
                        </div>
                        <div class="right">
                            <p>
                                <template v-if="proInfo.isDiscount">
                                    <span class="old-price"><i>￥</i>{{proInfo.proPrice}}</span>
                                    <span class="new-price"><i>￥</i>{{proInfo.proPrice-proInfo.proDis}}</span>
                                </template>
                                <template v-if="!proInfo.isDiscount">
                                    <span class="new-price"><i>￥</i>{{proInfo.proPrice}}</span>
                                </template>
                            </p>
                            <div class="store">
                                <div class="img">
                                    <el-avatar shape="square" :size=" 30" fit="fill">{{storeInfo.storeName}}</el-avatar>
                                </div>
                                <div style="width: 200px;">
                                    <h1 class="name">{{storeInfo.storeName}}</h1>
                                    <p class="slogan">{{storeInfo.storeDes}}</p>
                                </div>
                                <div class="button" @click="goStore(storeInfo.storeId)">
                                    <i>进入店铺</i>
                                </div>
                            </div>
                            <div class="store">
                                <el-rate v-model="storeInfo.Rate" disabled show-score text-color="#ff9900" score-template="{value}分">
                                </el-rate>
                            </div>
                        </div>
                    </div>
                    <div class="select-sum">
                        <span>数量</span>
                        <span>
                            <el-input-number v-model="sum" :min="1" :max="10"></el-input-number>
                        </span>
                    </div>
                    <div class="unit">
                        <span>单位</span>
                        <span>{{proInfo.proUnit}}</span>
                    </div>
                    <div class="operation">
                        <div class="add-car" v-if="isLogin" @click="addCar()">加入购物车</div>
                        <div class="add-car" v-else><a href="../login/login.html" style="color: #ffffff;">请登录</a></div>
                        <el-badge :value="hasUnread" :hidden="hasUnread<=0">
                            <div class="service" @click="getChatRecord()">
                                <p class="iconfont iconkefu" style="font-weight: 800;"></p>客服
                            </div>
                        </el-badge>
                    </div>
                </div>
            </div>
            <div class="pro-details">
                <h1>产品介绍</h1>
                <ul>
                    <li v-for="(item ,index)  in proDetails">
                        <img width="100%" v-lazy="proDetails[index]">
                    </li>
                </ul>
            </div>

        </div>


        <!-- foot -->
        <footer>

            <div class="center">
                <ul>
                    <li><i class="iconfont iconpinzhibaozhang"></i><span>品质保障</span></li>
                    <li><i class="iconfont icontianmaoqitiantuihuo"></i><span>七天无理由退货</span></li>
                    <li><i class="iconfont icontesefuwu"></i><span>特色服务</span></li>
                    <li><i class="iconfont iconweibiaoti-4"></i><span>急速送达</span></li>
                </ul>

            </div>
            <div class="statement">
                <div class="center">
                    <div class="left">
                        <div class="logo ">
                            <a href="../index/index.html">
                                <img width="140px"
                                    src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png">
                            </a>
                        </div>
                        <p>本网站只用作学习,演示使用,不做其他用途。</p>
                        <p>网站中的商品均为虚拟商品，不做真实出售。请勿付款!</p>
                        <p style="margin-top: 20px;">©Second you buy, powered by 苗文青 2021.</p>
                    </div>
                    <div class="right">
                        <h1>相关链接</h1>
                        <a target="_blank" href="https://www.iconfont.cn/">iconfont</a>
                        <a target="_blank" href="https://element.eleme.cn/#/zh-CN">ElementUI</a>
                        <a target="_blank" href="https://cn.vuejs.org/">Vue</a>
                        <a target="_blank" href="https://shop.vivo.com.cn/">VIVO</a>
                        <a target="_blank" href="https://animate.style/">Animate</a>
                        <a target="_blank" href="https://www.xiaomiyoupin.com/">小米有品</a>
                    </div>
                </div>


            </div>



        </footer>
        <!-- 侧边栏 -->
        <el-backtop :bottom="100">
            <div class="sidebar">
                <ul>
                    <li>
                        <el-tooltip class="item" effect="dark" content="返回顶部" placement="left">
                            <i class="iconfont iconjiantoushang1"></i>
                        </el-tooltip>
                    </li>
                    <li @click.stop="chatVisable=true">

                        <el-tooltip class="item" effect="dark" content="联系客服" placement="left">
                        </el-tooltip>


                    </li>

                </ul>
            </div>
        </el-backtop>
        <div class="chat-button" @click="getChatRecord()">
            <el-tooltip class="item" effect="dark" content="联系客服" placement="left" v-show="!chatVisable">
                <i class="iconfont iconkefu" style="font-weight: 800;"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="关闭" placement="left" v-show="chatVisable">
                <i class="iconfont iconguanbi" style="font-weight: 800;"></i>
            </el-tooltip>

        </div>
        <!-- 聊天对话框 -->
        <div class="chat-dialog" v-show="chatVisable">
            <div class="header">
                <div>
                    <i class="online"></i>
                    <!-- <i class="noline"></i> -->
                    <div class="img">
                        <el-avatar shape="square" :size=" 32" fit="fill">{{storeInfo.storeName}}</el-avatar>
                    </div>
                </div>
                <p>{{storeInfo.storeName}}</p>
            </div>
            <el-scrollbar style="height:60vh; width: 100%; " ref="myScrollbar">
                <ul ref="myUl">
                    <template v-for="(  item ,index) in chatRecord">
                        <li v-if="!(item.sendId==userInfo.cusId)">
                            <el-avatar shape="square" :size=" 28" fit="fill">{{storeInfo.storeName}}</el-avatar>
                            <div class="msg-context">
                                <h1>客服</h1>
                                <p> {{item.msg}}
                                </p>
                            </div>
                            <p class="time">{{item.sendTime.split(" ")[1]}}</p>
                            <p class="day">{{item.sendTime.split(" ")[0]}}</p>
                        </li>
                        <li v-if="item.sendId==userInfo.cusId" class="me">
                            <p class="time">{{item.sendTime.split(" ")[1]}}</p>
                            <p class="day">{{item.sendTime.split(" ")[0]}}</p>
                            <div class="msg-context">
                                <h1 style="text-align: right;">Fly</h1>
                                <p> {{item.msg}}
                                </p>
                            </div>
                            <img width="24px" height="24px" size="small" style="margin-left: 10px;" :src="url1" />

                        </li>

                    </template>

                </ul>

            </el-scrollbar>
            <div class="input">
                <textarea rows="3" v-model="msgContext"></textarea>
                <div @click="send()">发送</div>
            </div>
        </div>
    </div>
</body>
<script>
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '../../public/img/error.png',
        loading: '../../public/img/loading.png',
        attempt: 1
    })
    const baseUrl = 'http://182.92,221.225:8888'
    var app = new Vue({
        el: '#app',
        data: {
            userInfo: {

            },
            //轮播展示图片
            proImgList: [

            ],
            proDetails: [



            ],
            logoUrl: 'https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png',
            isLogin: false,
            url1: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            //当前选中图片下标
            thumbIndex: 0,
            //客服聊天框
            chatVisable: false,

            //选购商品数目
            sum: 1,
            //聊天测试
            num: 2,

            storeInfo: {},

            //=====================websocket ===================
            msgContext: '',
            path: "ws://182.92,221.225:8888/common/webSocket/2/",
            socket: null,
            waiterId: '',
            chatRecord: [

            ],
            //商品信息
            proInfo: {},
            hasUnread: 0,
            position: '用户未授权位置信息',
            rectangle: '用户未授权位置信息'



            //========================================

        },
        updated() {
            this.scrollDown();
        },
        mounted() {
            this.checkLogin();
            this.getData()

        },
        methods: {

            //===============================websocket========================

            init: function () {
                if (typeof (WebSocket) === "undefined") {
                    this.$notify({
                        title: '错误',
                        message: '您的浏览器不支持socket',
                        type: 'error'
                    });
                } else {

                    if (this.socket == null) {
                        // 实例化socket
                        console.log(this.userInfo.cusId);
                        this.socket = new WebSocket(this.path + this.userInfo.cusId + "/" + this.storeInfo
                            .storeId)
                        // 监听socket连接
                        this.socket.onopen = this.open
                        // 监听socket错误信息
                        this.socket.onerror = this.error
                        // 监听socket消息
                        this.socket.onmessage = this.getMessage
                    }
                }
            },
            open: function () {
                console.log("socket连接成功")
            },
            error: function () {
                console.log("连接错误")
            },
            getMessage: function (msg) {
                this.hasUnread += 1
                this.chatRecord.push(JSON.parse(msg.data))
            },
            send: function () {

                if (this.msgContext !== '') {
                    const msg = {
                        receiveId: this.waiterId,
                        receiveAvatar: '无',
                        sendAvatar: this.userInfo.cusAvatar,
                        sendId: this.userInfo.cusId,
                        storeId: this.storeInfo.storeId,
                        sendTime: '2020-12-12 23:12:12',
                        msg: this.msgContext,
                        type: '2',
                        proId: this.proInfo.proId,
                        position: this.position,
                        rectangle: this.rectangle




                    }
                    this.socket.send(JSON.stringify(msg))
                    const data = new Date()
                    let year = data.getFullYear()
                    let month = data.getMonth()
                    let day = data.getDate()
                    let hours = data.getHours()
                    let minutes = data.getMinutes()
                    let seconds = data.getSeconds()
                    msg.sendTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" +
                        seconds
                    this.chatRecord.push(msg)



                    this.msgContext = ''

                }

            },
            close: function () {
                console.log("socket已经关闭")
            },

            //================================================

            //检查登录
            checkLogin() {

                const userInfo = sessionStorage.getItem("userInfo")
                if (null === userInfo) {
                    this.isLogin = false
                } else {
                    this.isLogin = true
                    this.userInfo = JSON.parse(userInfo)

                    axios.get(baseUrl + '/common/amap/map')
                        .then((response) => {
                            this.position = response.data.data.position
                            this.rectangle = response.data.data.rectangle
                        })
                        .catch(function (error) {
                            return null
                        });

                }
            },
            //商品数据获取
            getData() {
                let proId = (window.location.href).split("?")[1].split("=")[1];

                axios.get(baseUrl +
                        "/common/product/get?proId=" + proId)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.proInfo = response.data.data
                            this.proDetails = this.proInfo.proIntroduction.split(",")
                            this.proImgList = this.proInfo.proImages.split(",")
                            axios.get(baseUrl +
                                    "/common/store/get?storeId=" + this.proInfo.storeId)
                                .then((response) => {
                                    if (response.data.code == 2000) {
                                        this.storeInfo = response.data.data
                                    } else {

                                    }

                                })
                                .catch(function (error) {
                                    console.log(error);
                                });


                        } else {

                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    });


            },


            gotoPersional() {
                window.location.href = '../personal/personal.html';
            },
            //退出登录
            logout() {
                sessionStorage.removeItem("userInfo")
                window.location.href = window.location.href;
            },
            gotoCar() {
                window.location.href = '../car/car.html';
            },
            getChatRecord() {

                this.hasUnread = 0
                if (this.isLogin) {
                    this.init();
                    if (this.chatVisable) {

                        this.chatVisable = false
                    } else {


                        //取 消息记录
                        axios.get(baseUrl + '/common/chat/messageRecord', {
                                params: {
                                    uid: this.userInfo.cusId,
                                    storeId: this.storeInfo.storeId

                                }
                            })
                            .then((response) => {
                                this.chatRecord = response.data.data
                                if (this.chatRecord == null) {
                                    this.chatRecord = []
                                }
                            })
                            .catch(function (error) {
                                return null
                            });

                        axios.get(baseUrl + '/common/chat/marchWaiter', {
                                params: {
                                    uId: this.userInfo.cusId,
                                    storeId: this.storeInfo.storeId
                                }
                            })
                            .then((response) => {
                                this.waiterId = response.data.data
                            })
                            .catch(function (error) {
                                return null
                            });

                        this.chatVisable = true

                    }
                } else {




                    this.$confirm('请登录后再次操作', '未登录', {
                            distinguishCancelAndClose: true,
                            confirmButtonText: '去登陆',
                            cancelButtonText: '暂不登录'
                        })
                        .then(() => {
                            window.location.href = '../login/login.html'
                        })
                        .catch(action => {

                        });


                }





            },


            //去商店主页
            goStore(sid) {
                window.location.href = '../store/store.html?sid=' + sid;
            },
            //聊天窗口滚动条置底
            scrollDown() {
                this.$refs.myScrollbar.wrap.scrollTop = this.$refs.myScrollbar.wrap.scrollHeight
            },
            //加入购物车
            addCar() {
                console.log(this.proInfo.proId);
                axios.get(baseUrl + "/common/car/add?uId=" + this.userInfo.cusId + "&pId=" + this.proInfo
                        .proId + "&sId=" + this.storeInfo.storeId + "&num=" + this.sum)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.$notify({
                                title: '成功',
                                message: '购物车添加成功',
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '失败',
                                message: '请稍后再试',
                                type: 'error'
                            });
                        }

                    })
                    .catch(function (error) {
                        this.$notify({
                            title: '失败',
                            message: '请稍后再试',
                            type: 'error'
                        });
                        console.log(error);
                    });





            }

        },

    })
</script>





</html>